<template>
  <div>
    <div class="container">
      <draggable
          v-model="boxes"
          item-key="id"
          class="draggable-container"
          animation="300"
          handle=".handle-drag"
      >
        <template #item="{ element, index }">

          <div class="draggable-item">
            <div class="tool-bar handle-drag">
              <div>
                {{ element.name }}
              </div>
              <div>
                <el-tooltip placement="top" content="编辑任务列表">
                  <el-dropdown trigger="click">
                    <i class="iconfont icon-gengduo tooltip-cursor"></i>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>新增任务</el-dropdown-item>
                        <el-dropdown-item>新增列表</el-dropdown-item>
                        <el-dropdown-item>编辑列表</el-dropdown-item>
                        <el-dropdown-item>删除列表</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-tooltip>
              </div>
            </div>

            <div class="task-list">
              <el-checkbox v-for="task in element.tasks">
                {{ task.name }}
              </el-checkbox>
            </div>
          </div>

        </template>
      </draggable>
      <!-- 新增列表按钮 -->
      <div class="create-task" :style="{ height: showCreateTask ? 'auto' : 'fit-content' }">
        <div v-show="!showCreateTask" class="task-create">
          <span @click="changeShowCreateTask(1)">
            <i class="el-icon-plus"></i>
            新建任务列表
          </span>
        </div>
        <div v-show="showCreateTask" class="task-create-input">
          <el-form>
            <el-form-item>
              <el-input v-model="createTaskName" placeholder="新建任务列表" @keyup.enter.native="creteTask()" autofocus
                        ref="createTaskInputRef"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="changeShowCreateTask(0)">取消</el-button>
              <el-button>保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import draggable from 'vuedraggable'

const showCreateTask = ref(false);
const createTaskName = ref('')
const createTaskInputRef = ref('createTaskInputRef')
let idCounter = 0
const generateId = () => idCounter++
const boxes = ref([
  {
    id: generateId(),
    name: "CV",
    tasks: [
      {
        name: "收集CV"
      }, {
        name: "编写CV"
      }
    ]
  },
  {
    id: generateId(),
    name: "RL",
    tasks: [
      {
        name: "收集RL"
      }, {
        name: "编写RL"
      }
    ]
  },
  {
    id: generateId(),
    name: "PS",
    tasks: [
      {
        name: "编写PS"
      }
    ]
  }
])

const changeShowCreateTask = (type) => {
  if (type === 1) {
    showCreateTask.value = true
    setTimeout(() => {
      createTaskInputRef.value.focus()
    }, 10)
  } else {
    showCreateTask.value = false
    createTaskName.value = ''
  }
}
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
  padding: 20px;
  background: #f8f9fa;
  box-sizing: border-box;
}

.draggable-container {
  display: flex;
  gap: 10px;

}

.draggable-item {
  //display: flex;
  //position: relative;
  //height: 100%;
  width: 350px;
  min-width: 100px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
  padding: 16px;
  box-sizing: border-box;
}

.tool-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  cursor: move;
  height: 36px;
}

.tooltip-cursor {
  cursor: pointer;
}
.task-list {
  display: flex;
  flex-direction: column;
}

.create-task {
  width: 350px;
  min-width: 100px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}


</style>